<template>
  <div class="sign-up" @click='$refs.verify.show = false'>
    <div style="height:50px;"></div>
    <div class="logo-box">
      <img
        :src="logoImg"
        width="150"
        @click="$router.push('/')"
      />
      <div>{{ $t('register.welcome') }}</div>
    </div>
    <div class="login-container">
      <!-- 註冊 -->
      <Form
        ref="formRegist"
        :model="formRegist"
        :rules="ruleInline"
        style="width:300px;"
      >
        <FormItem prop="username">
          <i-input
            v-model="formRegist.username"
            clearable
            :placeholder="$t('register.username')"
            type="text"
          >
            <Icon slot="prepend" type="md-person"></Icon>
          </i-input>
        </FormItem>
        <FormItem prop="password">
          <i-input
            v-model="formRegist.password"
            clearable
            :placeholder="$t('register.password')"
            type="password"
          >
            <Icon slot="prepend" type="md-lock"></Icon>
          </i-input>
        </FormItem>
        <FormItem prop="mobilePhone">
          <i-input
            v-model="formRegist.mobilePhone"
            clearable
            :placeholder="$t('register.phone')"
            type="text"
          >
            <Icon slot="prepend" type="md-phone-portrait"></Icon>
          </i-input>
        </FormItem>
        <FormItem prop="code">
          <i-input
            v-model="formRegist.code"
            clearable
            :placeholder="$t('register.code')"
            type="text"
          >
            <Icon
              slot="prepend"
              style="font-weight: bold"
              type="ios-text-outline"
            />
            <Button slot="append" @click="sendCode">{{ codeMsg }}</Button>
          </i-input>
        </FormItem>
        <FormItem>
          <Button :type="verifyStatus?'success':'default'" long @click="verifyBtnClick">
            {{ verifyStatus ? $t('register.pass') : $t('register.safe') }}
          </Button>
        </FormItem>
        <FormItem>
          <Button long size="large" type="error" @click="handleRegist"
          >{{ $t('register.register') }}
          </Button
          >
        </FormItem>
<!--        <FormItem><span class="color999 ml_20">點擊註冊，表示您同意《<router-link target="_blank"-->
<!--                                                                                to="/article?id=1371992704333905920">商城用戶协議</router-link>》</span>-->
<!--        </FormItem>-->
      </Form>
      <!-- 拼图驗證碼 -->
      <Verify
        ref="verify"
        :verifyType="verifyType"
        class="verify-con"
        @change="verifyChange"
      ></Verify>
      <div class="login-btn">{{ $t('register.hasAcount') }}<a @click="$router.push('login')">{{ $t('register.sigin') }}</a></div>
    </div>
<!--    <div class="foot">-->
<!--      <Row class="help" justify="space-around" type="flex">-->
<!--        <router-link class="item" target="_blank" to="/article">帮助</router-link>-->
<!--        <router-link class="item" target="_blank" to="/article?id=1371779927900160000">隐私</router-link>-->
<!--        <router-link class="item" target="_blank" to="/article?id=1371992704333905920">條款</router-link>-->
<!--      </Row>-->
<!--      <Row class="copyright" justify="center" type="flex">-->
<!--        Copyright ©-->
<!--        <a href="https://pickmall.cn" style="margin: 0 5px" target="_blank">{{ config.title }}</a>-->
<!--        版权所有-->
<!--      </Row>-->
<!--    </div>-->
  </div>
</template>

<script>

import * as RegExp from '@/plugins/RegExp.js';
import {md5} from '@/plugins/md5.js';
import * as apiLogin from '@/api/login.js';
import {sendSms} from '@/api/common.js';
import Verify from '@/components/verify';
import i18n from "@/lang";

export default {
  i18n,
  name: 'SignUp',
  components: {Verify},
  data() {
    return {
      config: require('@/config'),
      year: new Date().getFullYear(),
      logoImg: '',
      formRegist: {
        // 註冊表單
        mobilePhone: '',
        code: '',
        username: '',
        password: '',
        storeId: ''
      },
      ruleInline: {
        // 驗證规则
        username: [{required: true, message: i18n.t('register.username_text')}],
        password: [
          {required: true, message: i18n.t('register.password')},
          {type: 'string', min: 6, message: i18n.t('register.password')}
        ],
        mobilePhone: [
          {required: true, message: i18n.t('register.phone_text')},
          {
            pattern: RegExp.mobile,
            trigger: 'blur',
            message: i18n.t('register.phone_text2')
          }
        ],
        code: [{required: true, message: i18n.t('register.code_text')}]
      },
      verifyStatus: false, // 是否驗證通过
      verifyType: 'REGISTER', // 驗證狀態
      codeMsg: i18n.t('register.code_text'), // 提示文字
      interval: '', // 定時器
      time: 60 // 倒计時
    };
  },
  methods: {
    // 註冊
    handleRegist() {
      this.$refs.formRegist.validate((valid) => {
        if (valid) {
          let data = JSON.parse(JSON.stringify(this.formRegist));
          data.password = md5(data.password);
          data.storeId = window.localStorage.getItem('storeId')
          apiLogin.regist(data).then((res) => {
            if (res.success) {
              this.$Message.success(t('register.register_success'));
              this.$router.push('login');
            } else {
              this.$Message.warning(res.message);
            }
          });
        } else {
        }
      });
    },
    // 發送短信驗證碼
    sendCode() {
      if (this.time === 60) {
        if (this.formRegist.mobilePhone === '') {
          this.$Message.warning(i18n.t('register.write_phone'));
          return;
        }
        if (!this.verifyStatus) {
          this.$Message.warning(i18n.t('register.safe_text'));
          return;
        }
        let params = {
          mobile: this.formRegist.mobilePhone,
          verificationEnums: 'REGISTER'
        };
        sendSms(params).then(res => {
          if (res.success) {
            this.$Message.success(i18n.t('register.safe_success'));
            let that = this;
            this.interval = setInterval(() => {
              that.time--;
              if (that.time === 0) {
                that.time = 60;
                that.codeMsg = i18n.t('register.resend');
                that.verifyStatus = false;
                clearInterval(that.interval);
              } else {
                that.codeMsg = that.time;
              }
            }, 1000);
          } else {
            this.$Message.warning(res.message);
          }
        });
      }
    },
    // 图片驗證碼成功回调
    verifyChange(con) {
      if (!con.status) return;
      this.$refs.verify.show = false;
      this.verifyStatus = true;
    },
    // 打开图片驗證碼
    verifyBtnClick() {
      if (!this.verifyStatus) {
        this.$refs.verify.init();
      }
    }
  },
  mounted() {
    this.$refs.formRegist.resetFields();
    document.querySelector('.sign-up').style.height = window.innerHeight + 'px'
  },
  created() {
    // 店铺ID
    this.logoImg = require('@/assets/images/logo' + window.localStorage.getItem("storeId") + '.png');
  },
};
</script>
<style lang="scss" scoped>
.logo-box {
  width: 600px;
  height: 80px;
  margin: 0 auto;
  display: flex;
  align-items: center;

  img {
    width: 150px;
    cursor: pointer;
  }

  div {
    font-size: 20px;
    margin-top: 10px;
  }
}

.login-container {
  border-top: 2px solid $theme_color;
  position: relative;
  margin: 0 auto;
  width: 600px;
  background-color: #fff;
  padding: 20px 150px;

  .login-btn {
    position: absolute;
    right: 20px;
    top: -45px;
  }
}

.verify-con {
  position: absolute;
  left: 140px;
  top: 80px;
  z-index: 10;
}

.other-login {
  margin: 0 auto;

  .ivu-icon {
    font-size: 24px;
  }
}

.regist {
  display: flex;
  justify-content: flex-end;
  margin-top: -10px;

  span {
    margin-left: 10px;

    &:hover {
      cursor: pointer;
      color: $theme_color;
    }
  }
}

.foot {
  position: fixed;
  bottom: 4vh;
  width: 368px;
  left: calc(50% - 184px);
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;

  .help {
    margin: 0 auto;
    margin-bottom: 1vh;
    width: 60%;

    .item {
      color: rgba(0, 0, 0, 0.45);
    }

    :hover {
      color: rgba(0, 0, 0, 0.65);
    }
  }
}
</style>
